<template>
    <div class="TSUe">
        <div class="_8PBF">热门活动</div>
        <div style="background-image: url(https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1685364844091-3e8956d4318e888074d23cd119b2abc5.jpg)"
            class="_2k5U">
            <div class="_3vWX ">
                <h1 class="">夏日色彩</h1>
                <p>带上你的设备，丰富你的夏日色彩吧！</p>
                <button>了解详情&gt;</button>
            </div>
        </div>
        <div class="_1zs8">
            <div class="_24Nm">
                <h2 class="_1zrY">往期活动</h2>
                <div class="_2Yf9" v-if="list[0] && list[0].column_details" v-for="item, i in list[0].column_details"
                    :key="i">
                    <h1 class="_1Osd">{{ item.title }}</h1>
                    <div class="_1WZF">
                        <div v-for="it, a in item.activities" :key="a" class="qt79" @click="toUrl(it.url)">
                            <img :src="it.cover" alt="">
                            <h3>{{ item.title }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import axios from 'axios';
import { reactive, ref } from 'vue';

const list = reactive([])
getList()
async function getList() {
    let res = await axios("mySky/api/v2/activity-aggregations/all?lang=zh-Hans&platform=web&device=desktop")
    if (res.data.data.item.columns.length > 0) {
        list.push(res.data.data.item.columns[0])
    }
}

function toUrl(url) {
    open(url)
}
</script>
  



<style scoped>
.qt79 h3 {
    flex: 1;
    padding: 32px;
    background: rgba(0, 0, 0, .04);
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -.03em;
    color: rgba(0, 0, 0, .85);
    text-align: left;
    overflow: hidden;
}

.qt79 img {
    width: 100%;
    height: 240px;
    display: block;
}

.qt79 {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    width: 309.2px;
    margin: 0 16px 16px 0;
    cursor: pointer;
}

._1WZF {
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
}

._1Osd {
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -.03em;
    color: rgba(0, 0, 0, .85);
    text-align: left;
    margin-bottom: 24px;
}

._2Yf9 {
    margin-top: 48px;
}

._1zrY {
    padding: 0 133.5px;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    letter-spacing: -.03em;
    color: rgba(0, 0, 0, .85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TSUe {
    background-color: #fff;
    position: relative;
}

._8PBF {
    box-sizing: border-box;
    width: 100%;
    background: #1f1f1f;
    padding: 12px 360px;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -.03em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

._2k5U {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 720px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    overflow: hidden;
}

._3vWX {
    flex-direction: column;
    align-items: center;
    width: 640px;
    margin-top: 128px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .1));
    display: flex;
}

._3vWX h1 {
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
    text-align: center;
    letter-spacing: -.03em;
    color: #fff;
}

._3vWX p {
    width: 100%;
    margin-top: 24px;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    letter-spacing: -.03em;
    color: #fff;
}

._3vWX button {
    color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 78px;
    height: 48px;
    margin-top: 48px;
    border-radius: 99px;
    font-size: 16px;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: all .3s ease;
    background: transparent;
}

._1zs8 {
    padding-top: 64px;
    width: 960px;
    margin: 0 auto;
}
</style>